<template>
  <div class="common-layout">
    <el-container>
      <el-header>
      <span class="icon">
        <el-icon size="35">
          <shop/>
        </el-icon>
      </span>
        <span class="title">Spring wen.com</span>
      </el-header>


      <el-main>
        <el-card class="sign_in_card">
          <el-form :model="form" label-width="80px">
            <el-form-item label="Account">
              <el-input v-model="form.account" placeholder="Email/ telephone/ nickname"/>
            </el-form-item>

            <el-form-item label="Password">
              <el-input type="password" v-model="form.password" placeholder="password"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit()">sign in</el-button>


            </el-form-item>

          </el-form>

        </el-card>
      </el-main>


      <el-footer>&copy; by 2023 Zhang <sup>&reg;</sup></el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "../router/index.js";

const form = reactive({
  account: 'tom',
  password: '123'
})

const onSubmit = () =>{
  console.log(form)
  axios.post("http://localhost:8080/member/queryByAccountAndPassword",form)
      .then(res =>{
        console.log(res.data)
        if(res.data){
        router.push('/home');
        }else {
          ElMessage.error('Invalid account and password')
        }
      }).catch(err => {
        console.log(err)
      })
}
</script>

<style scoped>
.common-layout {
  height: 100vh; /* vh: viewport height */
}

.el-header {
  height: 60px;
  background: rgba(33, 33, 33, .8);
  color: #f9f9f9;
}

.el-container {
  background: url("../assets/img/bg.jpeg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.icon {
  display: inline-block; /* 行内块级*/
  vertical-align: middle; /*垂直方向上下居中对齐*/
}

.title {
  margin-left: 10px;
  font-size: 25px;
  font-weight: bolder;
  line-height: 60px; /* 行高：等于父级容器的高度 将在父级容器中垂直居中*/

}

.sign_in_card {
  margin: 80px 100px;
  width: 25%;
  border-radius: 10px;
  opacity: .8;
}

.el-icon {
  color: greenyellow;
}

.el-footer {
  color: #f9f9f9;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: rgba(33, 33, 33, .8);
}
</style>